<template>
  <div class="layui-container fly-user-main">
    <div class="site-tree-mobile layui-hide">
      <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="site-tree-mobile layui-hide">
      <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="fly-panel fly-panel-user" pad20>
      <div class="layui-tab layui-tab-brief" lay-filter="user">
        <ul class="layui-tab-title" id="LAY_mine">
          <li
            lay-id="info"
            v-for="(item, index) in lists"
            :key="'title' + index"
            :class=" index === titleId ? 'layui-this' : ''"
            @click="setTitleId(index)"
          >
            <router-link :to="{ name: item.path }">{{ item.title }}</router-link>
          </li>
        </ul>
        <div class="layui-tab-content" style="padding: 20px 0;">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import LeftMenu from '@/components/LeftMenu'
export default {
  name: 'setting',
  components: {},
  data () {
    return {
      lists: [
        {
          id: 0,
          title: '我的资料',
          path: 'info'
        },
        {
          id: 1,
          title: '头像',
          path: 'pic'
        },
        {
          id: 2,
          title: '密码',
          path: 'password'
        },
        {
          id: 3,
          title: '帐号绑定',
          path: 'account'
        }
      ],
      titleId: 0
    }
  },
  methods: {
    setTitleId (index) {
      this.titleId = index
    }
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        if (val.name === 'info') {
          this.titleId = 0
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fly-user-main>.fly-panel {
  margin: 0px 0px 0px 20px;
}
</style>
